<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<a href="user/testString.do">返回String</a>

<br><br><br>
<a href="user/testVoid.do">返回Void</a>
<br><br><br>
<a href="user/testResponse.do">返回Response</a>
<br><br>
<div id="app">
    <button id="btn"  @click="queryById">发送ajax请求</button>
    <ul>
        <li v-for="user in userList">{{user.username}}---{{user.age}}</li>
    </ul>

    用户名: <input type="text" v-model="user.username"> <br>
    密码: <input type="text" v-model="user.password"> <br>
    年龄: <input type="text" v-model="user.age"> <br>

    <button @click="addUser">保存</button>

</div>
</body>
<script>
    var Vue = new Vue({
        el:"#app",
        data:{
            userList:[],
            user:{
                username:"",
                password:"",
                age:""
            }
        },
        methods:{
            queryById(){
                 var _this = this;
                 axios.get("user/testAjax.do").then(
                     function (response){
                         _this.userList = response.data;
                     }
                 )
            },
            //保存,发送json格式 后台需要使用  RequestBody接收
            addUser(){
                var _this = this;
                axios.post("user/addUser.do",_this.user).then(
                    function (response){
                        console.log(response);
                    }
                )
            }


        }
    })
</script>



</html>
